<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <script>
    let mCharts = echarts.init(document.getElementById('echarts'))
    const xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    const yDataArr = [1500, 1800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    const yDataArr2 = [800, 1800, 900, 1400, 800, 1000, 1400, 1600, 900, 800, 900, 1400]
    // var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009]
    const option = {
      title: {
        text: '康师傅',
        subtext: '数量'
      },
      xAxis: {
        tpye: 'category',
        data: xDataArr,
        // 紧挨边缘
        // boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        // 脱离0值比例
        scale: true,
      },
      label: {
        show: true
      },
      legend: {
        data: ['绿茶','红茶']
      },
      series: [
        {
          name: '绿茶',
          data: yDataArr,
          type: 'line',
          // 设置为推叠图 stack的值只要是一样的就行
          stack:'all',
          // 填充
          areaStyle:{}
        },
        {
          name: '红茶',
          type: 'line',
          data: yDataArr2,
          stack:'all',
          areaStyle:{}
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>